@iconify/json

What is @iconify/json?

@iconify/json is a package that provides a collection of icon sets in JSON format. It allows developers to access a wide range of icons from different icon sets and use them in their projects. The package is useful for integrating icons into web applications, customizing icon sets, and managing icon data programmatically.

What are @iconify/json's main functionalities?

Accessing Icon Data

This feature allows you to access icon data from various icon sets included in the @iconify/json package. The code sample demonstrates how to require the package and access the Material Design Icons (mdi) set, logging the icon data to the console.

const iconData = require('@iconify/json');
const mdiIcons = iconData['mdi'];
console.log(mdiIcons);

Listing Available Icon Sets

This feature enables you to list all available icon sets included in the @iconify/json package. The code sample shows how to retrieve and log the names of all icon sets.

const iconData = require('@iconify/json');
const availableSets = Object.keys(iconData);
console.log(availableSets);

Retrieving Specific Icon Information

This feature allows you to retrieve information about a specific icon from an icon set. The code sample demonstrates how to access the 'home' icon from the Material Design Icons set and log its data.

const iconData = require('@iconify/json');
const mdiIcons = iconData['mdi'];
const specificIcon = mdiIcons.icons['home'];
console.log(specificIcon);

Other packages similar to @iconify/json

react-icons

react-icons is a popular package that provides a collection of icons for React applications. It includes icons from various icon libraries like Font Awesome, Material Design, and more. Unlike @iconify/json, which provides raw JSON data, react-icons offers React components for easy integration into React projects.

fontawesome

fontawesome is a widely used icon library that offers a comprehensive set of icons. It provides both free and pro versions with different levels of access. While @iconify/json offers a variety of icon sets in JSON format, fontawesome focuses on its own extensive icon collection and provides tools for web and design integration.

heroicons

heroicons is a set of free, MIT-licensed high-quality SVG icons for web projects. It is designed specifically for Tailwind CSS but can be used in any project. Unlike @iconify/json, which aggregates multiple icon sets, heroicons focuses on providing a consistent style of icons for modern web design.

README

Iconify icons collection in JSON format

This is collection of SVG icons created by various authors, released under various free licenses. Some collections require attribution when used for commercial purposes. See collections.md for list of collections and their licenses.

All SVG icons have been cleaned up. Content has been optimized, colors for monotone icons have been replaced with currentColor, ready to be inserted in HTML. Tools used for creating this collection are available on Iconify GitHub repository, more specifically @iconify/tools. You can use it to create your own JSON packages from custom icon sets.

This library is intended to be used in packages that build components, such as Iconify Tools and Iconify React.

Repository is updated 3 times a week by fully automated script, so it always contains latest icons from various sources.

How to get this repository

Instructions below are for Node.js and PHP projects.

Node.js

Run this command to add icons to your project:

npm install --save @iconify/json

Icons will be available in node_modules/@iconify/json

To resolve filename for any json file, use this:

const icons = require('@iconify/json');

// returns location of fa.json
let fa = icons.locate('fa');

PHP

Install and initialize Composer project. See documentation at https://getcomposer.org

Then open composer.json and add following code:

"require": {
    "php": ">=5.6",
    "iconify/json": "*"
}

then run:

composer install

Icons will be available in vendor/iconify/json/

If you don't use Composer, clone GitHub repository and add necessary autoload code.

To resolve filename for any json file, use this:

// returns location of fa.json
$fa = \Iconify\IconsJSON\Finder::locate('fa');

Format

Icons used by Iconify are in directory json, in Iconify JSON format.

Why JSON instead of SVG? To load images in bulk.

If you need individual SVG images, you can generate them using Iconify JSON Tools. See instructions for PHP version or Node.js version.

Format of json file is very simple:

{
    "icons": {
        "icon-name": {
            "body": "svg body",
            "width": width,
            "height": height
        }
    },
    "aliases": {
        "icon-alias": {
            "parent": "icon-name"
        }
    },
    "width": default width,
    "height": default height
}

"icons" object contains list of all icons.

Each icon has following properties:

• body - icon body
• width - width in pixels
• height - height in pixels
• rotate - rotation. Default = 0. Values: 0 = 0deg, 1 = 90deg, 2 = 180deg, 3 = 270deg
• hFlip - horizontal flip. Boolean value, default = false
• vFlip - vertical flip. Boolean value, default = false
• hidden - If set to true, icon is hidden. That means icon was removed from collection for some reason, but it is kept in JSON file to prevent applications that rely on old icon from breaking

Width or height might be missing. If icon does not have width or height, use default width or height from root object. rotate, hFlip and vFlip are all optional.

Optional "aliases" object contains list of aliases for icons. Format is similar to "icons" object, with additional property "parent" that points to parent icon. Any other properties overwrite properties of parent icon.

For more information see developer documentation on https://iconify.design/docs/json-icon-format/

Extracting individual SVG icons

See JSON tools readme for instructions for PHP or Node.js.

const fs = require('fs');
const {SVG, Collection} = require('@iconify/json-tools');

let collection = new Collection();
collection.loadIconifyCollection('mdi');
collection.listIcons(true).forEach(icon => {
    let svg = new SVG(collection.getIconData(icon));
    fs.writeFileSync('mdi-' + icon + '.svg', svg.getSVG({
        height: 'auto'
    }));
});

use \Iconify\JSONTools\Collection;
use \Iconify\JSONTools\SVG;

$collection = new Collection();
$collection->loadIconifyCollection('mdi');
foreach ($collection->listIcons(true) as $icon) {
    $svg = new SVG($collection->getIconData($icon));
    file_put_contents('mdi-' . $icon . '.svg', $svg->getSVG([
        'height'    => 'auto'
    ]));
}

License

This is collection of works by various authors, not original collection.

See collections.md for list of collections and their licenses.